JavaScript പ്രകടനം ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ ഉപയോഗിച്ച് വെബ്സൈറ്റിന്റെ വേഗതയും ഉപയോക്തൃ അനുഭവവും വർദ്ധിപ്പിക്കുക: കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും. മികച്ച ഫലങ്ങൾക്കായി ഓരോന്നും എങ്ങനെ, എപ്പോൾ ഉപയോഗിക്കണമെന്ന് അറിയുക.
JavaScript പ്രകടനം ഒപ്റ്റിമൈസേഷൻ: കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും
ഇന്നത്തെ ഡിജിറ്റൽ ലോകത്ത്, വെബ്സൈറ്റിന്റെ പ്രകടനം വളരെ പ്രധാനമാണ്. കുറഞ്ഞ ലോഡിംഗ് സമയം ഉപയോക്താക്കളെ അസ്വസ്ഥരാക്കുകയും, ബൗൺസ് നിരക്ക് വർദ്ധിപ്പിക്കുകയും, അതുപോലെ നിങ്ങളുടെ ബിസിനസ്സിൽ പ്രതികൂല ഫലങ്ങൾ ഉണ്ടാക്കുകയും ചെയ്യും. JavaScript, ഡൈനാമിക്, ഇന്ററാക്ടീവ് വെബ് അനുഭവങ്ങൾ ഉണ്ടാക്കുന്നതിന് അത്യാവശ്യമാണെങ്കിലും, ശ്രദ്ധയോടെ കൈകാര്യം ചെയ്തില്ലെങ്കിൽ പലപ്പോഴും ഒരു തടസ്സമായി മാറിയേക്കാം. JavaScript പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള രണ്ട് ശക്തമായ സാങ്കേതിക വിദ്യകളാണ് കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും. ഈ സമഗ്രമായ ഗൈഡ് ഓരോ ടെക്നിക്കും എങ്ങനെ പ്രവർത്തിക്കുമെന്നും, അതിന്റെ ഗുണദോഷങ്ങൾ, കൂടാതെ മികച്ച ഫലങ്ങൾ ലഭിക്കുന്നതിന് എപ്പോൾ ഉപയോഗിക്കണം എന്നതിനെക്കുറിച്ചും വിശദീകരിക്കുന്നു.
JavaScript ഒപ്റ്റിമൈസേഷന്റെ ആവശ്യകത മനസ്സിലാക്കുക
ആധുനിക വെബ് ആപ്ലിക്കേഷനുകൾ സമ്പന്നമായ പ്രവർത്തനങ്ങൾ നൽകുന്നതിന് JavaScript-നെ വളരെയധികം ആശ്രയിക്കുന്നു. എന്നിരുന്നാലും, ആപ്ലിക്കേഷനുകൾ സങ്കീർണ്ണമാകുമ്പോൾ, JavaScript കോഡിന്റെ അളവ് വർദ്ധിക്കുകയും വലിയ ബണ്ടിൽ വലുപ്പത്തിലേക്ക് ഇത് നയിക്കുകയും ചെയ്യുന്നു. ഈ വലിയ ബണ്ടിലുകൾക്ക് പ്രാരംഭ പേജ് ലോഡ് സമയത്തിൽ കാര്യമായ സ്വാധീനം ചെലുത്താൻ കഴിയും, കാരണം പേജ് ইন্റ്ററാക്ടീവ് ആകുന്നതിന് മുമ്പ് ബ്രൗസർ എല്ലാ കോഡും ഡൗൺലോഡ് ചെയ്യുകയും, വിശകലനം ചെയ്യുകയും, എക്സിക്യൂട്ട് ചെയ്യുകയും വേണം.
ഉൽപ്പന്ന ഫിൽറ്ററിംഗ്, തിരയൽ പ്രവർത്തനം, ഉപയോക്തൃ പ്രാമാണീകരണം, സംവേദനാത്മക ഉൽപ്പന്ന ഗാലറികൾ എന്നിങ്ങനെയുള്ള നിരവധി സവിശേഷതകളുള്ള ഒരു വലിയ ഇ-കൊമേഴ്സ് പ്ലാറ്റ്ഫോം പരിഗണിക്കുക. ഈ എല്ലാ ഫീച്ചറുകൾക്കും കാര്യമായ JavaScript കോഡ് ആവശ്യമാണ്. ശരിയായ ഒപ്റ്റിമൈസേഷൻ ഇല്ലാതെ, ഉപയോക്താക്കൾക്ക്, പ്രത്യേകിച്ച് മൊബൈൽ ഉപകരണങ്ങളിലും, കുറഞ്ഞ ഇന്റർനെറ്റ് കണക്ഷനുകളിലും, കുറഞ്ഞ ലോഡിംഗ് സമയം അനുഭവപ്പെടാം. ഇത് മോശം ഉപയോക്തൃ അനുഭവത്തിലേക്കും ഉപയോക്താക്കളുടെ നഷ്ട്ടത്തിലേക്കും നയിച്ചേക്കാം.
അതുകൊണ്ട്, JavaScript പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നത് ഒരു സാങ്കേതിക വിശദാംശം മാത്രമല്ല, നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനും ബിസിനസ് ലക്ഷ്യങ്ങൾ കൈവരിക്കുന്നതിനും ഇത് വളരെ പ്രധാനമാണ്.
കോഡ് സ്പ്ലിറ്റിംഗ്: വലിയ ബണ്ടിലുകളെ വിഭജിക്കുന്നു
എന്താണ് കോഡ് സ്പ്ലിറ്റിംഗ്?
കോഡ് സ്പ്ലിറ്റിംഗ് എന്നത് നിങ്ങളുടെ JavaScript കോഡിനെ ചെറുതും, കൈകാര്യം ചെയ്യാവുന്നതുമായ ഭാഗങ്ങളായി അല്ലെങ്കിൽ ബണ്ടിലുകളായി വിഭജിക്കുന്ന ഒരു സാങ്കേതികതയാണ്. മുഴുവൻ ആപ്ലിക്കേഷന്റെയും കോഡ് ഒരേ സമയം ലോഡ് ചെയ്യുന്നതിനുപകരം, പ്രാരംഭ പേജ് ലോഡിംഗിന് ആവശ്യമായ കോഡ് മാത്രം ബ്രൗസർ ഡൗൺലോഡ് ചെയ്യുന്നു. തുടർന്നുള്ള കോഡ് ഭാഗങ്ങൾ ഉപയോക്താവ് ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങളുമായി ഇടപഴകുമ്പോൾ ആവശ്യാനുസരണം ലോഡ് ചെയ്യപ്പെടുന്നു.
ഇതൊരു ഭൗതിക പുസ്തകശാല പോലെ ചിന്തിക്കുക. അവർ വിൽക്കുന്ന എല്ലാ പുസ്തകങ്ങളും മുൻവശത്തെ വിൻഡോയിൽ തിരുകുന്നതിനുപകരം, ആർക്കും വ്യക്തമായി കാണാൻ കഴിയാത്ത രീതിയിൽ, അവർ ശ്രദ്ധയോടെ തിരഞ്ഞെടുത്തവ പ്രദർശിപ്പിക്കുന്നു. ബാക്കിയുള്ള പുസ്തകങ്ങൾ കടയുടെ മറ്റ് ഭാഗങ്ങളിൽ സൂക്ഷിക്കുകയും ഒരു ഉപഭോക്താവ് പ്രത്യേകമായി ആവശ്യപ്പെടുമ്പോൾ മാത്രം എടുക്കുകയും ചെയ്യുന്നു. കോഡ് സ്പ്ലിറ്റിംഗ് സമാനമായ രീതിയിൽ പ്രവർത്തിക്കുന്നു, പ്രാരംഭ കാഴ്ചയ്ക്ക് ആവശ്യമായ കോഡ് മാത്രം പ്രദർശിപ്പിക്കുന്നു, കൂടാതെ ആവശ്യമുള്ള മറ്റ് കോഡുകൾ കൊണ്ടുവരുന്നു.
കോഡ് സ്പ്ലിറ്റിംഗ് എങ്ങനെ പ്രവർത്തിക്കുന്നു
കോഡ് സ്പ്ലിറ്റിംഗ് വിവിധ തലങ്ങളിൽ നടപ്പിലാക്കാൻ കഴിയും:
- എൻട്രി പോയിന്റ് സ്പ്ലിറ്റിംഗ്: നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ വിവിധ ഭാഗങ്ങൾക്കായി പ്രത്യേക എൻട്രി പോയിന്റുകൾ ഉണ്ടാക്കുന്നതിൽ ഇത് ഉൾപ്പെടുന്നു. ഉദാഹരണത്തിന്, പ്രധാന ആപ്ലിക്കേഷനും, ഒരു അഡ്മിൻ ഡാഷ്ബോർഡിനും, ഒരു ഉപയോക്തൃ പ്രൊഫൈൽ പേജിനും നിങ്ങൾക്ക് പ്രത്യേക എൻട്രി പോയിന്റുകൾ ഉണ്ടായിരിക്കാം.
- റൂട്ട്-അടിസ്ഥാനത്തിലുള്ള സ്പ്ലിറ്റിംഗ്: ഈ ടെക്നിക് ആപ്ലിക്കേഷന്റെ റൂട്ടുകളെ അടിസ്ഥാനമാക്കി കോഡ് വിഭജിക്കുന്നു. ഓരോ റൂട്ടും ഒരു പ്രത്യേക കോഡ് ഭാഗത്തിന് അനുബന്ധമാണ്, ഉപയോക്താവ് ആ റൂട്ടിലേക്ക് നാവിഗേറ്റ് ചെയ്യുമ്പോൾ ഇത് ലോഡ് ചെയ്യപ്പെടുന്നു.
- ഡൈനാമിക് ഇമ്പോർട്ടുകൾ: റൺടൈമിൽ, ആവശ്യാനുസരണം മൊഡ്യൂളുകൾ ലോഡ് ചെയ്യാൻ ഡൈനാമിക് ഇമ്പോർട്ടുകൾ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് കോഡ് എപ്പോൾ ലോഡ് ചെയ്യണം എന്നതിനെക്കുറിച്ച് നല്ല നിയന്ത്രണം നൽകുന്നു, ആവശ്യമില്ലാത്ത കോഡ് ആവശ്യമുള്ളപ്പോൾ മാത്രം ലോഡ് ചെയ്യാൻ ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.
കോഡ് സ്പ്ലിറ്റിംഗിന്റെ പ്രയോജനങ്ങൾ
- മെച്ചപ്പെട്ട പ്രാരംഭ ലോഡ് സമയം: പ്രാരംഭ ബണ്ടിൽ വലുപ്പം കുറയ്ക്കുന്നതിലൂടെ, കോഡ് സ്പ്ലിറ്റിംഗ് പ്രാരംഭ പേജ് ലോഡ് സമയം വളരെയധികം മെച്ചപ്പെടുത്തുന്നു, ഇത് വേഗതയേറിയതും കൂടുതൽ പ്രതികരിക്കുന്നതുമായ ഉപയോക്തൃ അനുഭവത്തിലേക്ക് നയിക്കുന്നു.
- കുറഞ്ഞ നെറ്റ്വർക്ക് ബാൻഡ്വിഡ്ത്ത്: ആവശ്യമായ കോഡ് മാത്രം ലോഡ് ചെയ്യുന്നത് നെറ്റ്വർക്കിലൂടെ കൈമാറേണ്ട ഡാറ്റയുടെ അളവ് കുറയ്ക്കുകയും, ഉപയോക്താവിനും സെർവറിനും ബാൻഡ്വിഡ്ത്ത് ലാഭിക്കുകയും ചെയ്യുന്നു.
- മെച്ചപ്പെട്ട കാഷെ ഉപയോഗം: ചെറിയ കോഡ് ഭാഗങ്ങൾ ബ്രൗസർ കാഷെ ചെയ്യാൻ സാധ്യതയുണ്ട്, ഇത് തുടർച്ചയായ സന്ദർശനങ്ങളിൽ വീണ്ടും ഡൗൺലോഡ് ചെയ്യേണ്ടതിൻ്റെ ആവശ്യകത കുറയ്ക്കുന്നു.
- മികച്ച ഉപയോക്തൃ അനുഭവം: വേഗത്തിലുള്ള ലോഡിംഗ് സമയവും കുറഞ്ഞ നെറ്റ്വർക്ക് ബാൻഡ്വിഡ്ത്തും സുഗമവും കൂടുതൽ ആസ്വാദ്യകരവുമായ ഉപയോക്തൃ അനുഭവത്തിന് സംഭാവന നൽകുന്നു.
ഉദാഹരണം: React-ഉം React.lazy-യും Suspense-ഉം ഉപയോഗിച്ച്
React-ൽ, React.lazy, Suspense എന്നിവ ഉപയോഗിച്ച് കോഡ് സ്പ്ലിറ്റിംഗ് എളുപ്പത്തിൽ നടപ്പിലാക്കാൻ കഴിയും. React.lazy നിങ്ങൾക്ക് ഡൈനാമിക് ആയി ഘടകങ്ങൾ ഇറക്കുമതി ചെയ്യാൻ അനുവദിക്കുന്നു, അതേസമയം Suspense ഘടകം ലോഡ് ചെയ്യുമ്പോൾ ഒരു ഫോള back UI (ഉദാഹരണത്തിന്, ഒരു ലോഡിംഗ് സ്പിന്നർ) പ്രദർശിപ്പിക്കാനുള്ള ഒരു വഴി നൽകുന്നു.
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
Loading... }>
ഈ ഉദാഹരണത്തിൽ, OtherComponent ഇത് റെൻഡർ ചെയ്യുമ്പോൾ മാത്രം ലോഡ് ചെയ്യപ്പെടുന്നു. ഇത് ലോഡ് ചെയ്യുമ്പോൾ, ഉപയോക്താവ് "Loading..." എന്ന സന്ദേശം കാണും.
കോഡ് സ്പ്ലിറ്റിംഗിനുള്ള ടൂളുകൾ
- Webpack: വിവിധ കോഡ് സ്പ്ലിറ്റിംഗ് ടെക്നിക്കുകൾ പിന്തുണയ്ക്കുന്ന ഒരു ജനപ്രിയ മൊഡ്യൂൾ ബണ്ട്ലർ.
- Rollup: ചെറിയതും കാര്യക്ഷമവുമായ ബണ്ടിലുകൾ ഉണ്ടാക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്ന മറ്റൊരു മൊഡ്യൂൾ ബണ്ട്ലർ.
- Parcel: കോഡ് സ്പ്ലിറ്റിംഗ് സ്വയമേവ കൈകാര്യം ചെയ്യുന്ന ഒരു സീറോ-കോൺഫിഗറേഷൻ ബണ്ട്ലർ.
- Vite: വേഗത്തിലുള്ള വികസനത്തിനും ഒപ്റ്റിമൈസ് ചെയ്ത പ്രൊഡക്ഷൻ ബിൽഡുകൾക്കുമായി നേറ്റീവ് ES മൊഡ്യൂളുകൾ ഉപയോഗിക്കുന്ന ഒരു ബിൽഡ് ടൂൾ.
ലേസി ഇവാലുവേഷൻ: കമ്പ്യൂട്ടേഷൻ മാറ്റിവയ്ക്കുന്നു
എന്താണ് ലേസി ഇവാലുവേഷൻ?
ലേസി ഇവാലുവേഷൻ, അല്ലെങ്കിൽ മാറ്റിവച്ച മൂല്യനിർണയം, ഒരു എക്സ്പ്രഷന്റെ മൂല്യനിർണയം അതിന്റെ മൂല്യം ആവശ്യമായി വരുമ്പോൾ മാത്രം വൈകിപ്പിക്കുന്ന ഒരു പ്രോഗ്രാമിംഗ് ടെക്നിക്കാണ്. മറ്റൊരു വിധത്തിൽ പറഞ്ഞാൽ, കണക്കുകൂട്ടലുകൾ മുൻകൂട്ടി ചെയ്യുന്നതിനുപകരം, അവയുടെ ഫലങ്ങൾ ആവശ്യമുള്ളപ്പോൾ മാത്രം നടത്തുന്നു.
നിങ്ങൾ ഒരു മൾട്ടി-കോഴ്സ് ഭക്ഷണം തയ്യാറാക്കുകയാണെന്ന് കരുതുക. നിങ്ങൾ എല്ലാ ഭക്ഷണവും ഒരേ സമയം പാചകം ചെയ്യില്ല. പകരം, ഓരോ വിഭവവും വിളമ്പേണ്ട സമയത്ത് മാത്രം തയ്യാറാക്കും. ലേസി ഇവാലുവേഷനും സമാനമായ രീതിയിൽ പ്രവർത്തിക്കുന്നു, കണക്കുകൂട്ടലുകൾ ആവശ്യമായ സമയത്ത് മാത്രം ചെയ്യുന്നു.
ലേസി ഇവാലുവേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു
JavaScript-ൽ, ലേസി ഇവാലുവേഷൻ വിവിധ സാങ്കേതിക വിദ്യകൾ ഉപയോഗിച്ച് നടപ്പിലാക്കാൻ കഴിയും:
- പ്രവർത്തനങ്ങൾ: ഒരു ഫംഗ്ഷനിൽ ഒരു എക്സ്പ്രഷൻ പൊതിയുന്നത് ഫംഗ്ഷൻ വിളിക്കുന്നതുവരെ അതിന്റെ മൂല്യനിർണയം മാറ്റിവയ്ക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
- ജനറേറ്ററുകൾ: ആവശ്യാനുസരണം മൂല്യങ്ങൾ ഉൽപാദിപ്പിക്കുന്ന迭代റ്ററുകൾ ഉണ്ടാക്കാൻ ജനറേറ്ററുകൾ ഒരു വഴി നൽകുന്നു.
- മെമ്മോയിസേഷൻ: ചെലവേറിയ ഫംഗ്ഷൻ കോളുകളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുന്നതിലും, അതേ ഇൻപുട്ടുകൾ വീണ്ടും സംഭവിക്കുമ്പോൾ കാഷെ ചെയ്ത ഫലം തിരികെ നൽകുന്നതിലും ഉൾപ്പെടുന്നു.
- പ്രോക്സികൾ: പ്രോപ്പർട്ടി ആക്സസ് തടയുന്നതിനും, പ്രോപ്പർട്ടി മൂല്യങ്ങളുടെ കണക്കുകൂട്ടൽ അവจริงത്തിൽ ആക്സസ് ചെയ്യുന്നതുവരെ മാറ്റിവയ്ക്കുന്നതിനും പ്രോക്സികൾ ഉപയോഗിക്കാം.
ലേസി ഇവാലുവേഷന്റെ പ്രയോജനങ്ങൾ
- മെച്ചപ്പെട്ട പ്രകടനം: ആവശ്യമില്ലാത്ത കണക്കുകൂട്ടലുകൾ മാറ്റിവയ്ക്കുന്നതിലൂടെ, ലേസി ഇവാലുവേഷൻ പ്രത്യേകിച്ച് വലിയ ഡാറ്റാസെറ്റുകളോ സങ്കീർണ്ണമായ കണക്കുകൂട്ടലുകളോ കൈകാര്യം ചെയ്യുമ്പോൾ പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്താൻ കഴിയും.
- കുറഞ്ഞ മെമ്മറി ഉപയോഗം: ഉടനടി ആവശ്യമില്ലാത്ത ഇടത്തരം മൂല്യങ്ങൾ ഉണ്ടാക്കുന്നത് ഒഴിവാക്കുന്നതിലൂടെ ലേസി ഇവാലുവേഷൻ മെമ്മറി ഉപയോഗം കുറയ്ക്കാൻ കഴിയും.
- വർദ്ധിച്ച പ്രതികരണം: പ്രാരംഭ ലോഡിംഗിൽ ആവശ്യമില്ലാത്ത കണക്കുകൂട്ടലുകൾ ഒഴിവാക്കുന്നതിലൂടെ, ലേസി ഇവാലുവേഷൻ ആപ്ലിക്കേഷന്റെ പ്രതികരണം വർദ്ധിപ്പിക്കാൻ കഴിയും.
- അനന്തമായ ഡാറ്റാ ഘടനകൾ: ആവശ്യാനുസരണം ആവശ്യമായ ഘടകങ്ങൾ മാത്രം കണക്കാക്കുന്നതിലൂടെ അനന്തമായ ലിസ്റ്റുകളോ സ്ട്രീമുകളോ പോലുള്ള അനന്തമായ ഡാറ്റാ ഘടനകളിൽ പ്രവർത്തിക്കാൻ ലേസി ഇവാലുവേഷൻ നിങ്ങളെ അനുവദിക്കുന്നു.
ഉദാഹരണം: ലേസി ലോഡിംഗ് ചിത്രങ്ങൾ
ലേസി ഇവാലുവേഷന്റെ ഒരു സാധാരണ ഉപയോഗമാണ് ലേസി ലോഡിംഗ് ചിത്രങ്ങൾ. ഒരു പേജിലെ എല്ലാ ചിത്രങ്ങളും മുൻകൂട്ടി ലോഡ് ചെയ്യുന്നതിനുപകരം, വ്യൂപോർട്ടിൽ തുടക്കത്തിൽ ദൃശ്യമല്ലാത്ത ചിത്രങ്ങൾ ലോഡ് ചെയ്യുന്നത് നിങ്ങൾക്ക് മാറ്റിവയ്ക്കാം. ഇത് പ്രാരംഭ പേജ് ലോഡ് സമയം വളരെയധികം മെച്ചപ്പെടുത്താനും നെറ്റ്വർക്ക് ബാൻഡ്വിഡ്ത്ത് ഉപഭോഗം കുറയ്ക്കാനും കഴിയും.
function lazyLoadImages() {
const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
images.forEach((img) => {
observer.observe(img);
});
}
document.addEventListener('DOMContentLoaded', lazyLoadImages);
ഒരു ചിത്രം വ്യൂപോർട്ടിൽ പ്രവേശിക്കുമ്പോൾ കണ്ടെത്താൻ ഈ ഉദാഹരണം IntersectionObserver API ഉപയോഗിക്കുന്നു. ഒരു ചിത്രം ദൃശ്യമാകുമ്പോൾ, അതിന്റെ src ആട്രിബ്യൂട്ട് അതിന്റെ data-src ആട്രിബ്യൂട്ടിന്റെ മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുന്നു, ഇത് ചിത്രം ലോഡ് ചെയ്യാൻ തുടങ്ങുന്നു. തുടർന്ന് ചിത്രം വീണ്ടും ലോഡ് ചെയ്യുന്നത് തടയാൻ ഒബ്സർവർ ചിത്രത്തെ നിരീക്ഷിക്കുന്നത് ഒഴിവാക്കുന്നു.
ഉദാഹരണം: മെമ്മോയിസേഷൻ
ചെലവേറിയ ഫംഗ്ഷൻ കോളുകൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ മെമ്മോയിസേഷൻ ഉപയോഗിക്കാം. ഇതാ ഒരു ഉദാഹരണം:
function memoize(func) {
const cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
}
const result = func(...args);
cache[key] = result;
return result;
};
}
function expensiveCalculation(n) {
// Simulate a time-consuming calculation
for (let i = 0; i < 100000000; i++) {
// Do something
}
return n * 2;
}
const memoizedCalculation = memoize(expensiveCalculation);
console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');
console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');
ഈ ഉദാഹരണത്തിൽ, memoize ഫംഗ്ഷൻ ഇൻപുട്ടായി ഒരു ഫംഗ്ഷൻ എടുക്കുകയും, ആ ഫംഗ്ഷന്റെ മെമ്മോയിസ് ചെയ്ത പതിപ്പ് തിരികെ നൽകുകയും ചെയ്യുന്നു. മെമ്മോയിസ് ചെയ്ത ഫംഗ്ഷൻ മുൻകാല കോളുകളുടെ ഫലങ്ങൾ കാഷെ ചെയ്യുന്നു, അതിനാൽ, അതേ ആർഗ്യുമെന്റുകൾ ഉപയോഗിച്ചുള്ള തുടർച്ചയായ കോളുകൾക്ക്, യഥാർത്ഥ ഫംഗ്ഷൻ വീണ്ടും എക്സിക്യൂട്ട് ചെയ്യാതെ കാഷെ ചെയ്ത ഫലം തിരികെ നൽകാൻ കഴിയും.
കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും: പ്രധാന വ്യത്യാസങ്ങൾ
കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും ശക്തമായ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളാണെങ്കിലും, അവ പ്രകടനത്തിന്റെ വ്യത്യസ്ത വശങ്ങളെ അഭിസംബോധന ചെയ്യുന്നു:
- കോഡ് സ്പ്ലിറ്റിംഗ്: കോഡിനെ ചെറിയ ഭാഗങ്ങളായി വിഭജിച്ച് ആവശ്യാനുസരണം ലോഡ് ചെയ്യുന്നതിലൂടെ പ്രാരംഭ ബണ്ടിൽ വലുപ്പം കുറയ്ക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഇത് പ്രാഥമികമായി പ്രാരംഭ പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്താൻ ഉപയോഗിക്കുന്നു.
- ലേസി ഇവാലുവേഷൻ: മൂല്യങ്ങളുടെ കമ്പ്യൂട്ടേഷൻ യഥാർത്ഥത്തിൽ ആവശ്യമുള്ളതുവരെ മാറ്റിവയ്ക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. ഇത് പ്രധാനമായും ചെലവേറിയ കണക്കുകൂട്ടലുകളോ വലിയ ഡാറ്റാസെറ്റുകളോ കൈകാര്യം ചെയ്യുമ്പോൾ പ്രകടനം മെച്ചപ്പെടുത്താൻ ഉപയോഗിക്കുന്നു.
ചുരുക്കത്തിൽ, കോഡ് സ്പ്ലിറ്റിംഗ് മുൻകൂട്ടി ഡൗൺലോഡ് ചെയ്യേണ്ട കോഡിന്റെ അളവ് കുറയ്ക്കുന്നു, അതേസമയം ലേസി ഇവാലുവേഷൻ മുൻകൂട്ടി ചെയ്യേണ്ട കമ്പ്യൂട്ടേഷന്റെ അളവ് കുറയ്ക്കുന്നു.
എപ്പോൾ കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും ഉപയോഗിക്കണം
കോഡ് സ്പ്ലിറ്റിംഗ്
- വലിയ ആപ്ലിക്കേഷനുകൾ: വലിയ അളവിലുള്ള JavaScript കോഡുള്ള ആപ്ലിക്കേഷനുകൾക്കായി കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കുക, പ്രത്യേകിച്ചും ഒന്നിലധികം റൂട്ടുകളോ ഫീച്ചറുകളോ ഉള്ളവ.
- പ്രാരംഭ ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നു: പ്രാരംഭ പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നതിനും ഇന്ററാക്ടീവ് ആകാനുള്ള സമയം കുറയ്ക്കുന്നതിനും കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കുക.
- നെറ്റ്വർക്ക് ബാൻഡ്വിഡ്ത്ത് കുറയ്ക്കുന്നു: നെറ്റ്വർക്കിലൂടെ കൈമാറേണ്ട ഡാറ്റയുടെ അളവ് കുറയ്ക്കുന്നതിന് കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കുക.
ലേസി ഇവാലുവേഷൻ
- ചെലവേറിയ കണക്കുകൂട്ടലുകൾ: ചെലവേറിയ കണക്കുകൂട്ടലുകൾ നടത്തുന്ന അല്ലെങ്കിൽ വലിയ ഡാറ്റാസെറ്റുകൾ ആക്സസ് ചെയ്യുന്ന ഫംഗ്ഷനുകൾക്കായി ലേസി ഇവാലുവേഷൻ ഉപയോഗിക്കുക.
- പ്രതികരണം മെച്ചപ്പെടുത്തുന്നു: പ്രാരംഭ ലോഡിംഗിൽ ആവശ്യമില്ലാത്ത കണക്കുകൂട്ടലുകൾ മാറ്റിവയ്ക്കുന്നതിലൂടെ ആപ്ലിക്കേഷന്റെ പ്രതികരണം മെച്ചപ്പെടുത്താൻ ലേസി ഇവാലുവേഷൻ ഉപയോഗിക്കുക.
- അനന്തമായ ഡാറ്റാ ഘടനകൾ: അനന്തമായ ലിസ്റ്റുകളോ സ്ട്രീമുകളോ പോലുള്ള അനന്തമായ ഡാറ്റാ ഘടനകളിൽ പ്രവർത്തിക്കുമ്പോൾ ലേസി ഇവാലുവേഷൻ ഉപയോഗിക്കുക.
- ലേസി ലോഡിംഗ് മീഡിയ: പേജ് ലോഡ് സമയം മെച്ചപ്പെടുത്തുന്നതിന് ചിത്രങ്ങൾ, വീഡിയോകൾ, മറ്റ് മീഡിയ ആസ്തികൾ എന്നിവയ്ക്കായി ലേസി ലോഡിംഗ് നടപ്പിലാക്കുക.
കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും സംയോജിപ്പിക്കുന്നു
പല സാഹചര്യങ്ങളിലും, കൂടുതൽ പ്രകടനം നേടുന്നതിന് കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും സംയോജിപ്പിക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, നിങ്ങളുടെ ആപ്ലിക്കേഷനെ ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കാൻ നിങ്ങൾക്ക് കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കാം, തുടർന്ന് ആ ഭാഗങ്ങളിലെ മൂല്യങ്ങളുടെ കമ്പ്യൂട്ടേഷൻ മാറ്റിവയ്ക്കാൻ ലേസി ഇവാലുവേഷൻ ഉപയോഗിക്കുക.
ഒരു ഇ-കൊമേഴ്സ് ആപ്ലിക്കേഷൻ പരിഗണിക്കുക. ഉൽപ്പന്ന ലിസ്റ്റിംഗ് പേജ്, ഉൽപ്പന്ന വിശദാംശ പേജ്, ചെക്ക്ഔട്ട് പേജ് എന്നിവയ്ക്കായി പ്രത്യേക ബണ്ടിലുകളായി ആപ്ലിക്കേഷൻ വിഭജിക്കാൻ നിങ്ങൾക്ക് കോഡ് സ്പ്ലിറ്റിംഗ് ഉപയോഗിക്കാം. തുടർന്ന്, ഉൽപ്പന്ന വിശദാംശ പേജിനുള്ളിൽ, ചിത്രങ്ങൾ ലോഡ് ചെയ്യുന്നതും അല്ലെങ്കിൽ ഉൽപ്പന്ന ശുപാർശകളുടെ കമ്പ്യൂട്ടേഷൻ ആവശ്യമായി വരുമ്പോൾ ലേസി ഇവാലുവേഷൻ ഉപയോഗിക്കാം.
കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും: അധിക ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ
കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും ശക്തമായ സാങ്കേതിക വിദ്യകളാണെങ്കിലും, JavaScript പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുമ്പോൾ ഇത് ഒരു ഭാഗം മാത്രമാണ്. പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്താൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്ന ചില അധിക ടെക്നിക്കുകൾ ഇതാ:
- മിനിഫിക്കേഷൻ: നിങ്ങളുടെ കോഡിന്റെ വലുപ്പം കുറയ്ക്കുന്നതിന് ആവശ്യമായ അക്ഷരങ്ങൾ (ഉദാഹരണത്തിന്, വൈറ്റ്സ്പേസ്, അഭിപ്രായങ്ങൾ) നീക്കം ചെയ്യുക.
- കംപ്രഷൻ: നിങ്ങളുടെ കോഡിന്റെ വലുപ്പം കൂടുതൽ കുറയ്ക്കുന്നതിന് Gzip അല്ലെങ്കിൽ Brotli പോലുള്ള ടൂളുകൾ ഉപയോഗിച്ച് നിങ്ങളുടെ കോഡ് കംപ്രസ് ചെയ്യുക.
- കാഷിംഗ്: നിങ്ങളുടെ സെർവറിലേക്കുള്ള അഭ്യർത്ഥനകളുടെ എണ്ണം കുറയ്ക്കുന്നതിന് ബ്രൗസർ കാഷിംഗും CDN കാഷിംഗും പ്രയോജനപ്പെടുത്തുക.
- ട്രീ ഷേക്കിംഗ്: നിങ്ങളുടെ ബണ്ടിലുകളിൽ നിന്ന് ഉപയോഗിക്കാത്ത കോഡ് നീക്കം ചെയ്ത് അവയുടെ വലുപ്പം കുറയ്ക്കുക.
- ചിത്ര ഒപ്റ്റിമൈസേഷൻ: ചിത്രങ്ങൾ കംപ്രസ് ചെയ്യുന്നതിലൂടെയും, ഉചിതമായ അളവിലേക്ക് മാറ്റം വരുത്തുന്നതിലൂടെയും, WebP പോലുള്ള ആധുനിക ഇമേജ് ഫോർമാറ്റുകൾ ഉപയോഗിക്കുന്നതിലൂടെയും ചിത്രങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യുക.
- ഡീബൗൺസിംഗും ത്രോട്ടിലിംഗും: പ്രകടനം സംബന്ധിച്ച പ്രശ്നങ്ങൾ ഒഴിവാക്കാൻ ഇവന്റ് കൈകാര്യം ചെയ്യുന്നവരുടെ നിരക്ക് നിയന്ത്രിക്കുക.
- കാര്യക്ഷമമായ DOM കൃത്രിമം: DOM കൃത്രിമങ്ങൾ കുറയ്ക്കുക, കാര്യക്ഷമമായ DOM കൃത്രിമത്വ രീതികൾ ഉപയോഗിക്കുക.
- വെബ് വർക്കേഴ്സ്: കമ്പ്യൂട്ടേഷണൽ തീവ്രമായ ടാസ്ക്കുകൾ വെബ് വർക്കേഴ്സിലേക്ക് മാറ്റുക, ഇത് പ്രധാന ത്രെഡിനെ തടസ്സപ്പെടുത്തുന്നത് തടയുന്നു.
ഉപസംഹാരം
നല്ല ഉപയോക്തൃ അനുഭവം നൽകുന്നതിനും ബിസിനസ് ലക്ഷ്യങ്ങൾ നേടുന്നതിനും JavaScript പ്രകടനം ഒപ്റ്റിമൈസേഷൻ ഒരു പ്രധാന ഘടകമാണ്. കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ഇവാലുവേഷനും പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുന്നതിലൂടെയും, നെറ്റ്വർക്ക് ബാൻഡ്വിഡ്ത്ത് ഉപഭോഗം കുറയ്ക്കുന്നതിലൂടെയും, ആവശ്യമില്ലാത്ത കണക്കുകൂട്ടലുകൾ മാറ്റിവയ്ക്കുന്നതിലൂടെയും പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്താൻ കഴിയുന്ന രണ്ട് ശക്തമായ സാങ്കേതിക വിദ്യകളാണ്. ഈ സാങ്കേതിക വിദ്യകൾ എങ്ങനെ പ്രവർത്തിക്കുമെന്നും എപ്പോൾ ഉപയോഗിക്കണമെന്നും മനസ്സിലാക്കുന്നതിലൂടെ, വേഗതയേറിയതും, കൂടുതൽ പ്രതികരിക്കുന്നതും, കൂടുതൽ ആസ്വാദ്യകരവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് ഉണ്ടാക്കാൻ കഴിയും.
നിങ്ങളുടെ നിർദ്ദിഷ്ട ആപ്ലിക്കേഷൻ ആവശ്യകതകൾ പരിഗണിക്കാനും നിങ്ങളുടെ ആവശ്യത്തിനനുസരിച്ച് ഏറ്റവും അനുയോജ്യമായ ടെക്നിക്കുകൾ ഉപയോഗിക്കാനും ഓർമ്മിക്കുക. നിങ്ങളുടെ ആപ്ലിക്കേഷന്റെ പ്രകടനം തുടർച്ചയായി നിരീക്ഷിക്കുകയും, മികച്ച ഉപയോക്തൃ അനുഭവം നൽകുന്നുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങളുടെ ഒപ്റ്റിമൈസേഷൻ തന്ത്രങ്ങളിൽ മാറ്റം വരുത്തുകയും ചെയ്യുക. ഫീച്ചർ സമ്പന്നവും, മികച്ച പ്രകടനം കാഴ്ചവെക്കുന്നതും, ഉപയോഗിക്കാൻ മനോഹരവുമായ വെബ് ആപ്ലിക്കേഷനുകൾ ഉണ്ടാക്കുന്നതിന് കോഡ് സ്പ്ലിറ്റിംഗിന്റെയും ലേസി ഇവാലുവേഷന്റെയും ശക്തി ഉൾക്കൊള്ളുക.
കൂടുതൽ പഠന വിഭവങ്ങൾ
- Webpack ഡോക്യുമെന്റേഷൻ: https://webpack.js.org/
- Rollup ഡോക്യുമെന്റേഷൻ: https://rollupjs.org/guide/en/
- Vite ഡോക്യുമെന്റേഷൻ: https://vitejs.dev/
- MDN വെബ് ഡോക്സ് - ഇന്റർസെക്ഷൻ ഒബ്സർവർ API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
- Google ഡെവലപ്പർമാർ - JavaScript എക്സിക്യൂഷൻ ഒപ്റ്റിമൈസ് ചെയ്യുക: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/